import { defineComponent } from 'vue';
import styles from '@/main/index.module.scss';
import { terminalViewerProps } from '@/main/js/terminalAttribute';

export default defineComponent({
  name: 'ViewTable',
  props: terminalViewerProps(),
  setup(props) {
    return () => (
      <table class={[styles.tTable, styles.tBorderDashed]}>
        <thead>
          <tr class={styles.tBorderDashed}>
            {props.data.content.head.map(child => (
              <td key={child} class={styles.tBorderDashed}>{child}</td>
            ))}
          </tr>
        </thead>
        <tbody>
          {props.data.content.rows.map((row, idx) => (
            <tr key={idx} class={styles.tBorderDashed}>
              {row.map(child => (
                <td class={styles.tBorderDashed}>
                  <div domPropsInnerHTML={child} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    )
  }
})
